import React, { useState } from 'react';
import { EmojiRecommendation, Emoji } from '../../types';
import { GlassCard } from '../ui';

interface EmojiGridProps {
  /** 表情包推荐结果 */
  recommendation: EmojiRecommendation | null;
  /** 是否正在加载 */
  isLoading?: boolean;
  /** 选择表情包回调 */
  onSelect?: (emoji: Emoji) => void;
}

/**
 * 表情包推荐网格组件
 * 展示推荐的表情包，支持点击选择
 * Requirements: 3.1
 */
export const EmojiGrid: React.FC<EmojiGridProps> = ({
  recommendation,
  isLoading = false,
  onSelect,
}) => {
  const [copiedId, setCopiedId] = useState<string | null>(null);

  const getCategoryLabel = (category: string) => {
    const labelMap: Record<string, string> = {
      happy: '开心',
      sad: '悲伤',
      comfort: '安慰',
      funny: '搞笑',
      grateful: '感激',
      apologetic: '道歉',
      neutral: '通用',
    };
    return labelMap[category] || category;
  };

  const handleEmojiClick = async (emoji: Emoji) => {
    try {
      await navigator.clipboard.writeText(emoji.url);
      setCopiedId(emoji.id);
      onSelect?.(emoji);
      setTimeout(() => setCopiedId(null), 2000);
    } catch (err) {
      console.error('复制失败:', err);
    }
  };

  if (isLoading) {
    return (
      <div>
        <div className="flex items-center justify-between mb-3">
          <div className="h-4 bg-emerald-100 rounded w-24 animate-shimmer"></div>
          <div className="h-4 bg-emerald-100 rounded w-16 animate-shimmer"></div>
        </div>
        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3">
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <GlassCard key={i} className="animate-pulse-soft aspect-square p-2 overflow-hidden">
              <div className="w-full h-full flex flex-col items-center justify-center">
                <div className="w-10 h-10 bg-emerald-100 rounded-lg animate-shimmer" style={{ animationDelay: `${i * 0.1}s` }}></div>
                <div className="h-3 bg-emerald-100 rounded w-12 mt-2 animate-shimmer" style={{ animationDelay: `${i * 0.1 + 0.05}s` }}></div>
              </div>
            </GlassCard>
          ))}
        </div>
      </div>
    );
  }

  if (!recommendation || recommendation.emojis.length === 0) {
    return (
      <GlassCard className="text-center py-6">
        <p className="text-4xl mb-2">😊</p>
        <p className="text-gray-500 text-sm">暂无表情包推荐</p>
      </GlassCard>
    );
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-emerald-700 text-sm font-medium">
          表情包推荐
        </h3>
        <span className="px-2 py-0.5 bg-orange-100 rounded text-xs text-orange-600">
          {getCategoryLabel(recommendation.category)}
          {recommendation.isDefault && ' · 默认'}
        </span>
      </div>
      
      <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3">
        {recommendation.emojis.map((emoji, index) => (
          <GlassCard
            key={emoji.id}
            hoverable
            onClick={() => handleEmojiClick(emoji)}
            className={`
              aspect-square p-2 flex flex-col items-center justify-center
              animate-slide-up relative
              ${copiedId === emoji.id ? 'ring-2 ring-emerald-400' : ''}
            `}
            style={{ animationDelay: `${index * 0.05}s` } as React.CSSProperties}
          >
            {/* 表情图片或占位符 */}
            {emoji.url.startsWith('http') ? (
              <img 
                src={emoji.url} 
                alt={emoji.description}
                className="w-12 h-12 object-contain"
              />
            ) : (
              <span className="text-4xl">{emoji.url}</span>
            )}
            
            {/* 描述 */}
            <p className="text-gray-500 text-xs mt-1 text-center truncate w-full">
              {emoji.description}
            </p>
            
            {/* 复制成功提示 */}
            {copiedId === emoji.id && (
              <div className="absolute inset-0 bg-emerald-500/20 rounded-xl flex items-center justify-center">
                <span className="text-emerald-600 text-sm font-medium">✓ 已复制</span>
              </div>
            )}
          </GlassCard>
        ))}
      </div>
    </div>
  );
};

export default EmojiGrid;
